<template>
  <div>
    <div class="app-container calendar-list-container">
      <el-row>
        <el-col :span="24">
          <div>
            <TableFrom :list="table.list"
                       @handleSelectionChange="handleSelectionChange"
                       :options="options"
                       :columns="table.columns"
                       :operates="operates"
                       :formItems="formItems"
                       :tabFrom="tabFrom"
                       :pagination="pagination"
                       ref="interfaceLog"
                       @submit="handleSubmit"
                       @batchSubmit="batchDataClick"
                       @handleSizeChange="handleSizeChange"
                       @handleCurrentChange="handleCurrentChange"
                       @custom="customArr">
            </TableFrom>
          </div>
        </el-col>
      </el-row>
    </div>
    <div id="product">
      <CustomColumn :show.sync="showCustomColumn"
                    localName="interfaceLog"
                    :baseColumns="columns"
                    :defaultColumns="defaultColumns"
                    :columns.sync="table.columns" />
    </div>
  </div>
</template>

<script>
import TableFrom from '@/components/packages/publicTable.vue';
export default {
  name: 'logTab',
  components: {
    TableFrom,
  },
  data() {
    return {
      showCustomColumn: false,
      table: {
        list: [],
        columns: [],
      },

      formItems: [
        {
          lable: '',
          type: 'daterange',
          key: 'dateTime',
          placeholder: '请选择日期',
          defaultValue: 0,
          rules: [],
          style: { width: '300px' },
        },
        {
          lable: '请求接口：',
          type: 'input',
          key: 'url',
          placeholder: '请求接口地址',
          style: { width: '300px' },
        },
        {
          lable: '请求类型：',
          type: 'dropDown',
          key: 'requestType',
          placeholder: '请求类型',
          style: { width: '120px' },
          clearable: true,
          option: [
            {
              label: 'POST',
              value: 'POST',
            },
            {
              label: 'GET',
              value: 'GET',
            },
          ],
        },
        {
          lable: '请求状态：',
          type: 'dropDown',
          key: 'requestStatus',
          placeholder: '请求状态',
          style: { width: '120px' },
          clearable: true,
          option: [
            {
              label: '正常',
              value: 0,
            },
            {
              label: '异常',
              value: 1,
            },
          ],
        },
      ],

      list: [], // table数据
      listParm: {
        page: 1,
        size: 10,
        start: '',
        end: '',
        url: '',
      },
      options: {
        stripe: true, // 是否为斑马纹 table
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        indexList: true,
        page: true,
      }, // table 的参数
      //表头操作
      tabFrom: {
        selectButton: true, //是否展示查询按钮
        resetting: true, //是否展示重置按钮
        custom: true,
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
      },
      defaultColumns: [
        'url',
        'params',
        'responseTime',
        'result',
        'requestStatus',
        'message',
        'createTime',
      ],
      columns: [
        {
          key: 'url',
          label: '请求接口',
          align: 'center',
          prop: 'url',
        },
        {
          key: 'params',
          label: '请求参数',
          align: 'center',
          prop: 'params',
        },
        {
          key: 'statusCode',
          label: '请求状态码',
          align: 'center',
          prop: 'statusCode',
        },
        {
          key: 'responseTime',
          label: '请求耗时',
          align: 'center',
          prop: 'responseTime',
          formatter: (row, col, cellVaule) => {
            return row.responseTime + 'ms';
          },
        },
        {
          key: 'result',
          label: '接口返回',
          align: 'center',
          prop: 'result',
          overflow: true,
        },
        {
          key: 'requestStatus',
          label: '请求状态',
          align: 'center',
          prop: 'requestStatus',
          render: (h, params) => {
            const { buttonName, buttonType } = this.getButtonInfo(
              params.row.requestStatus
            );

            return h(
              'el-button',
              {
                props: {
                  type: buttonType,
                },
                on: {
                  click: () => {
                    /* 按钮点击事件处理逻辑 */
                  },
                },
              },
              buttonName
            );
          },
        },
        {
          key: 'requestType',
          label: '请求类型',
          align: 'center',
          prop: 'requestType',
        },
        {
          key: 'paramsType',
          label: '参数类型',
          align: 'center',
          prop: 'paramsType',
        },
        {
          key: 'message',
          label: '错误信息',
          align: 'center',
          prop: 'message',
        },
        {
          key: 'createTime',
          label: '请求时间',
          align: 'center',
          prop: 'createTime',
        },
      ], // 需要展示的列

      operates: {
        width: 150,
        list: [],
      }, // 列操作按钮
    };
  },
  mounted: function () {
    var _this = this;
    _this.listParm = this.$refs.interfaceLog.defaultDateTime(0);
    this.getList(1, this.pagination.pageSize);
    window.bus.$on('blogTableReload', function () {
      _this.getList(_this.pagination.currentPage, _this.pagination.pageSize);
    });
  },
  methods: {
    getButtonInfo(status) {
      let buttonName = '';
      let buttonType = '';

      switch (status) {
        case 0:
          buttonName = '正常';
          buttonType = 'success';
          break;
        case 1:
          buttonName = '异常';
          buttonType = 'danger';
          break;
        // 其他状态的处理逻辑
        default:
          break;
      }

      return { buttonName, buttonType };
    },
    customArr(val) {
      this.showCustomColumn = true;
    },
    search() {
      this.getList(1, this.pagination.pageSize);
    },
    handleSubmit(formDataInfo) {
      var _this = this;
      _this.listParm = formDataInfo;
      _this.getList(1, this.pagination.pageSize);
    },

    async getList(page, size) {
      var _this = this;
      if (page) _this.listParm.page = page;
      if (size) _this.listParm.size = size;
      let res = await this.$api.logApi.resultList(_this.listParm, {
        loadingTime: 100,
        loadingText: '数据加载中...',
      });
      if (res) {
        this.table.list = res.records;
        this.pagination.currentPage = res.current;
        this.pagination.totalCount = res.total;
      }
    },
    handleSizeChange(val) {
      this.listParm.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listParm.page = val;
      this.getList();
    },
  },
};
</script>